<template>
<div class="header"> 
	<div class="header-left">
		<div class="iconfont back-icon">&#xe624;</div> 
	</div>
	<div class="header-input"><span class="iconfont">&#xe632;</span>输入城市/景点/游玩主题</div>
	<div class="header-right">
		{{this.city}}
		<span class="iconfont arrow-icon">&#xe64a;</span>
	</div>
</div>

</template>

<script >

export default{
  name:'HomeHeader',
  props: {
  	city: String
  }
	}
</script>
<style  lang="stylus" scoped>
@import'~styles/varibles.styl'
	.header
		display: flex
		line-height: 1.86rem
		background: $bgcolor
		color:#fff
		.header-left
			width: 2.3rem
			float: letf
			.back-icon
				text-align: center
				font-size: 1.1rem
		.header-input
			flex: 1	
			margin-top: .3rem
			margin-left: .3rem
			padding-left: .6rem 
			height: 1.3rem
			line-height: 1.3rem
			background: #fff
			border-radius: .5rem
			color: #ccc
		.header-right
			width: 3.5rem
			float: right
			text-align: center
			margin-right:.3rem

			.arrow-icon
				font-size: 0.8rem
				margin-left:-.3rem





</style>	